<template>
    <div>
        <el-dialog v-model="dialogFormVisible" :title="title" width="700" center destroy-on-close=true overflow>
            <el-form ref="formRef" :model="form" style="max-width: 600px" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="学号" style="width: 250px" label-position="right" prop="sno">
                            <el-input v-model="form.sno" :disabled="disabled" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名" style="width: 250px" label-position="right" prop="sname">
                            <el-input v-model="form.sname" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="生日" style="width: 250px" label-position="right">
                            <el-date-picker v-model="form.birthday" type="date" clearable autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="入学时间" style="width: 250px" label-position="right">
                            <el-date-picker v-model="form.en_time" type="date" clearable autocomplete="off" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="专业" style="width: 250px" label-position="right" prop="specialty">
                            <el-input v-model="form.specialty" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" style="width: 250px" label-position="right" prop="ssex">
                            <el-select v-model="form.ssex" placeholder="请选择性别：" clearable autocomplete="off">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="年级" style="width: 250px" label-position="right" prop="grade">
                            <el-input v-model="form.grade" autocomplete="off" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :offset="5">
                        <el-form-item style="width: 250px">
                            <el-button type="primary" @click="OnSubmit">确认</el-button>
                            <el-button @click="Close">取消</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup name="StudentForm">
import { reactive, ref, defineEmits } from 'vue'
import request from '@/utils/request'
const dialogFormVisible = ref(false);
const title = ref('');
const disabled = ref(false);
const emit = defineEmits(['submit']);

let inteTable = reactive({
    sno: '111111111',
    sname: '',
    ssex: '',
    birthday: '',
    en_time: '',
    specialty: '',
    grade: '',
})
const form = ref(inteTable);
const showAndInte = (val) => {
    if (val === undefined || val === null) {
        BlankForm();
        disabled.value = true;
        title.value = '新增学生信息';
    }
    else {
        inteTable.sno = val.sno;
        inteTable.sname = val.sname;
        inteTable.ssex = val.ssex;
        inteTable.birthday = val.birthday;
        inteTable.en_time = val.en_time;
        inteTable.specialty = val.specialty;
        inteTable.grade = val.grade;
        disabled.value = true;
        title.value = '编辑学生信息';
    }
    dialogFormVisible.value = true
}
const formRef = ref(null)
const OnSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return;
        } else {
            if (title.value == "编辑学生信息") {
                request({
                    url: 'api/Student?' + 'sno=' + inteTable.sno,
                    method: 'put',
                    data: inteTable
                }).then(res => {
                    if (res.status == 200) {
                        Close();
                        ElMessage({
                            message: '编辑成功.',
                            type: 'success',
                        });
                        emit('submit');
                    }
                })
            }
            else {
                request({
                    url: 'api/Student',
                    method: 'post',
                    data: inteTable
                }).then(res => {
                    if (res.status == 200) {
                        Close();
                        ElMessage({
                            message: '新增成功.',
                            type: 'success',
                        });
                        emit('submit');
                    }
                })
            }
        }
    })
}
const BlankForm = () => {
    inteTable.sno = '';
    inteTable.sname = '';
    inteTable.ssex = '';
    inteTable.birthday = '';
    inteTable.en_time = '';
    inteTable.specialty = '';
    inteTable.grade = '';
}
const Close = () => {
    BlankForm();
    dialogFormVisible.value = false;
}
const rules = reactive({
    sno: [
        { required: false, message: '请输入学号', trigger: 'change' },
        { length: 9, message: '学号长度为9位', trigger: 'change' },
    ],
    sname: [
        { required: true, message: '请输入姓名', trigger: 'change' },
        { max: 8, message: '姓名长度不能超过8位', trigger: 'change' },
    ],
    ssex: [
        { required: true, message: '请选择性别', trigger: 'change' },
    ],
    specialty: [
        { max: 10, message: '请输入专业', trigger: 'change' },
    ],
    grade: [
        { required: true, message: '请输入年级', trigger: 'change' },
        { max: 5, message: '年级长度不能超过5位', trigger: 'change' },
    ]
})
defineExpose({
    showAndInte,
})

</script>